<template>
  <div class="banner">
    <div class="item">
      <div class="flex">
        <div class="flex-item">
          <div class="banner-intro">
            <h1 class="title">Simple Pro 专业版</h1>
            <div class="subject">减少编码，让开发更简单！</div>
            <div class="desc">
              <div class="dt">- 无需前端：</div>
              <div class="db">
                Simple Pro基于Django Admin 可以让您不写前端页面直接开发一个大型而复杂的系统。
              </div>
              <div class="dt">- 现有系统迁移：</div>
              <div class="db">
                直接兼容原生Django Admin，不用更改代码，几行配置就可以将老旧系统Admin替换为Simple Pro。
              </div>

              <div class="dt">- 前后分离：</div>
              <div class="db">
                我们对Django的列表页进行了重构，使其使用现在流行的Ajax加载数据，提升用户体验。
              </div>

              <div class="dt">- 快速仪表盘：</div>
              <div class="db">
                Pro集成了可视化的图表设计器，可以快速生成各种图表，并且可以自定义图表的样式。
              </div>

            </div>

            <div>
              <a href="#buy" style="box-shadow: none"  class="el-button el-button--danger"><i class="el-icon-goods"></i>立即购买</a>
              <a :href="doc" class="doc-btn">了解如何使用</a>
            </div>
          </div>
        </div>
        <div class="flex-item preview">
          <div style="display:block;">
            <img src="~/static/img/p-browser.png" alt="">
            <a :href="demo" class="live-btn">在线体验</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import config from "@/utils/config";
export default {
  name: "BannerPro",
  data(){
    return {
      doc: config.pro.doc,
      demo: config.pro.demo,
    }
  }
}
</script>

<style scoped lang="less">
.item {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.banner {
  //height: 680px;
  background-image: url(~/static/img/product_bg.png);
  background-size: cover;
  background-position: center center;
  padding-top: 250px;
  padding-bottom: 20px;
}

.banner-intro {
  text-shadow: 5px 5px 5px #000;
  .title {
    margin-top: 0;
    text-align: left;
    font-weight: 900;
    color: rgb(249, 249, 249);
    font-size: 36px;
  }

  .subject {
    text-align: left;
    color: white;
    //margin-top: 24px;
    font-weight: 300;
    font-size: 16px;
  }
}

.preview {
  flex: 0 0 512px;

  img {
    max-width: 100%;
    max-height: 100%;
  }
}

.desc {
  font-size: 12px;
  color: white;
  text-shadow: 5px 5px 5px #000;
  .dt {
    margin: 0px 0px 3px;
    text-align: left;
    font-style: normal;
    font-weight: 500;
    margin-top: 10px;
  }

  .db {
    text-align: left;
    font-style: normal;
    font-weight: 300;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

.live-btn {
  display: block;
  width: 180Px;
  height: 40Px;
  line-height: 40Px;
  font-size: 16Px;
  font-weight: 700;
  color: #475bc3;
  text-align: center;
  background-color: #fff;
  border-radius: 4Px;
  margin: 20px auto;
  transition: background-color 0.3s;

  &:hover {
    background-color: rgba(#fff, 0.8);
    color: rgba(#475bc3, 0.5);

  }
}

.doc-btn {
  font-size: 14px;
  border-radius: 5px;
  padding: 0 8px;
  height: 35px;
  line-height: 35px;
  display: inline-block;
  text-align: center;
  border: 1px transparent solid;
  color: white;
  background-color: #50a1ff;
  transition: background-color 0.3s;
  cursor:pointer;
  &:hover {
    background-color: rgba(#50a1ff, 0.8);
  }
}

.doc-btn {
  background-color: transparent;
  border-color: #fff;
  margin-left: 20px;

  &:hover {
    background-color: rgba(#fff, 0.7);
  }
}

</style>
